<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小矩形生成器</title>
    <style>
        /* 大矩形容器样式 */
        #container {
            width: 500px;
            height: 500px;
            background-color: lightgray;
            position: relative;
        }

        /* 小矩形样式 */
        .rectangle {
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>

    <!-- 输入框 -->
    <div>
        <label for="width">宽度: </label>
        <input type="number" id="width" placeholder="输入宽度" /><br>

        <label for="height">高度: </label>
        <input type="number" id="height" placeholder="输入高度" /><br>

        <label for="color">颜色: </label>
        <input type="color" id="color" /><br>

        <label for="margin">边距: </label>
        <input type="number" id="margin" placeholder="输入边距" /><br>

        <button onclick="createRectangle()">生成小矩形</button>
    </div>

    <!-- 大矩形容器 -->
    <div id="container"></div>

    <script>
        function createRectangle() {
            // 获取输入框的值
            var width = document.getElementById('width').value;
            var height = document.getElementById('height').value;
            var color = document.getElementById('color').value;
            var margin = document.getElementById('margin').value;

            // 创建小矩形元素
            var rectangle = document.createElement('div');
            rectangle.classList.add('rectangle');
            rectangle.style.width = width + 'px';
            rectangle.style.height = height + 'px';
            rectangle.style.backgroundColor = color;
            rectangle.style.margin = margin + 'px';

            // 将小矩形添加到大矩形容器中
            var container = document.getElementById('container');
            container.appendChild(rectangle);
        }
    </script>

</body>
</html>
